{include file="public/header"}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>角色管理</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/tt.css" />
    <style>

        html,
        body {
            margin:0;
            padding:0;
            width: 100%;
            background: rgba(238, 238, 238, 1);
        }
        .tt_top11{
            background:#3F3F3F;
        }
        .tt_top22{
            background:#fff;
        }
        .tt_top33{
            background:#2A63E7;
        }
        .container {
            padding-top: 30px;
            padding-bottom: 73px;
        }

        .box {
            width: 1200px;
            height: 821px;
            margin: 0 auto;
            padding-bottom: 30px;
            background-color: #FFFFFF;
            border-radius:3px;
        }

        .box_1 {
            padding-left: 30px;
            padding-right: 30px;
            height: 70px;
        }
        .box1{
            padding-left:30px;
            padding-right:30px;
        }
        .tablee{
            font-size:12px;
            color:#666;
            font-weight:600;
            background:#F7F7F7;
            height:50px;
            border-radius:4px 4px 0px 0px;
            display: flex;
            align-items: center;


        }
        .tablee1{
            background:#fff;
            font-weight:400;
            border-bottom:1px solid #E9E9E9;
        }
        .tdd{
            width:228px;
            text-align: center;

        }

        .tdd1{
            font-size:0;
        }

        .name111 {
            width: 24px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(0, 101, 240, 1);
            margin-right: 10px;
        }

        .xia {
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
        }




        .borderr {
            height: 28px;
            width: 28px;
            text-align: center;
            border-radius: 2px;
            border: 1px solid #F2F2F2;
        }

        .border_active {
            color: #FFFFFF;
            font-size: 12px;
            background-color: #0065F0;
            height: 28px;
            width: 28px;
            text-align: center;
            border-radius: 2px;
        }

        .box_1Name {
            color: #4A4A4A;
            width: 56px;
            font-size: 14px;
            font-weight: 400;
            line-height: 66px;
            padding-right: 30px;
        }

        .inputttt {
            margin-top: 19px;
            width: 230px;
            height: 28px;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
            border: 1px solid rgba(244, 244, 244, 1);
            color: rgba(204, 204, 204, 1);
            font-size: 12px;
        }

        .inputrenwu {
            padding-left: 11px;
            box-sizing: border-box;
            display: inline-block !important;
            width: 200px !important;
            height: 28px !important;
            outline: none;
            border-width: 0;
            font-size:12px;
            color:#333;
        }
        .inputrenwu::-webkit-input-placeholder{
            font-size:12px;
            color:#ccc;
        }

        .inputtttImg {
            width: 16px;
            height: 16px;
            margin-top: 6px;
            margin-left: 5px;
        }

        .select {
            margin-right: 20px;
            width: 160px;
            height: 34px;
            border-radius: 3px;
            border: 1px solid #cccccc;
            display: flex;
            padding-left: 10px;
            box-sizing: border-box;
            line-height: 34px;
            color: #666666;
            font-size: 12px;
            position: relative;
        }

        .sanjiao_wrap {
            width: 32px;
            height: 32px;
            border-left: 1px solid #CCCCCC;
            /* border-radius: 3px; */
            position: absolute;
            right: 0;
            top: 0;
        }

        .sanjiao1 {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 8px;
            height: 8px;
            transform: translate(-50%, -50%);
        }

        .selectttt {
            margin-top: 19px;
            margin-left: 60px;
            width: 120px;
            height: 28px;
            background: #FFFFFF;
            border-radius: 3px;
            border: 1px solid rgba(204, 204, 204, 0.2985);
        }
        .outerr{
            width: 120px;
            margin-top: 19px;
            margin-left: 60px;
            position: relative;
        }
        .selectttt1{
            width: 120px;
            height: 28px;
            background: #FFFFFF;
            border-radius: 3px;
            border: 1px solid rgba(204, 204, 204, 0.2985);
        }
        .select-active{
            border:1px solid rgba(0,101,240,0.4);
            box-shadow:0px 0px 6px 0px rgba(0,101,240,0.6);
        }
        .innerr{
            width:120px;
            margin-top:4px;
            background:#fff;
            box-shadow:0px 0px 6px 0px rgba(0,101,240,0.6);
            border-radius:3px;
            position: absolute;
        }
        .optionn{
            line-height:26px;
            padding-left:16px;
            font-size:12px;
            color:#999;

        }
        /*.optionn:hover{
          background:#0065F0;
          color:#fff;
        }*/
        .option-active{
            background:#0065F0;
            color:#fff;
        }

        .selecttttName {
            font-size: 12px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 28px;
            background: #FFFFFF;
            margin-left: 8px;
        }

        .selecttttImg {
            width: 26px;
            height: 28px;
        }

        .selectttt2 {
            margin-top: 19px;
            margin-left: 30px;
            width: 68px;
            height: 28px;
            background: rgba(0, 101, 240, 1);
            border-radius: 3px;
            text-align: center;
            line-height: 28px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }

        .selectttt3 {
            margin-top: 19px;
            width: 100px;
            height: 30px;
            background: rgba(0, 101, 240, 1);
            border-radius: 3px;
            text-align: center;
            line-height: 28px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }
        .hidden{
            display: none
        }
    </style>
</head>
<body>
<header class="tt_topAll">
    <div class="tt_top3">
        <div class="tt_top33">角色管理>新增</div>
    </div>
</header>
<div class="container">
    <div class="box">
        <div class="box_1 flex-wrap">
            <div class="flex-con"></div>
            <div class="selectttt3" style="cursor: pointer;"  onclick="location.href = '/shop/role/add'">新增角色</div>
        </div>
        <div class="box1">
            <div class="tablee">
                <div class="tdd">序号</div>
                <div class="tdd">角色名称</div>
                <div class="tdd">人数</div>
                <div class="tdd">创建时间</div>
                <div class="tdd">操作</div>
            </div>
            {foreach name="data" item="vo"}
            <div class="tablee tablee1">
                <div class="tdd">{$key+1}</div>
                <div class="tdd">{$vo.role_name}</div>
                <div class="tdd">{$vo.num}</div>
                <div class="tdd">{$vo.role_time}</div>
                <div class="tdd tdd1">
                    <span class="name111" onclick="location.href = '/shop/role/update?id='+{$vo.role_id};" style="cursor: pointer;" >编辑</span>
                    <span class="name111 del" style="cursor: pointer;" data-id="{$vo.role_id}">删除</span>
                </div>
            </div>
            {/foreach}
        </div>

    </div>
</div>





</body>
{include file="public/footer"}
<script type="text/javascript">
    var ishidden = false;

    function selectclick() {

        // alert(1);
        if (!ishidden) {
            $('.innerr').removeClass('hidden');
            $('.selectttt1').addClass('select-active');
            ishidden = true;

        } else {
            $('.innerr').addClass('hidden');
            $('.selectttt1').removeClass('select-active');
            ishidden = false;
        }
    }
</script>
<script>
    /*下架*/
    $(".del").click(function () {
        if(confirm('确认删除？')){
            var id = $(this).attr('data-id');
            $.ajax({
                url: '/shop/role/del',
                data: {id:id},
                type: 'POST',
                dataType: 'JSON',
                success: function (returnData) {
                    alert(returnData.msg);
                    if(returnData.status == 200){
                        location.reload();
                    }
                },

            })
        }
    });
</script>
</html>
